import BaseView from './baseView.js'
//引入学生显示界面
import StudentListView from './studentList.js' 
//一个类就时一个页面
class LoginView extends BaseView{
    //渲染页面的方法
    render(){
        this.$app.html(`
        <div style="margin:150px auto;width: 400px;">
        <form class="layui-form">
            <div class="layui-form-item">
              <label class="layui-form-label">用户名</label>
              <div class="layui-input-inline">
                <input type="text" id="username" name="title" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">密&nbsp;码</label>
              <div class="layui-input-inline">
                <input type="password" id="pwd" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
              </div>
    
            </div>
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo" id="btn" type="button">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
              </div>
            </div>
          </form>
        </div>     
        `)
    }
    //绑定事件
    handle(){
        let  userInput = $("#username");
        let  pwdInput = $("#pwd")
        let  btnObj = $("#btn"); 
        btnObj.click(()=>{
          $.ajax({
                type:"post",
                url:"/api/user/login",
                data:{
                    "username":userInput.val(),
                    "pwd":pwdInput.val()
                },
                dataType:"json",
                success(result){
                // console.log(data);
                 //判断是否登录成功
                  if(result.length!=0){
                      alert("登录成功");
                      //把jwt 保存在本地存储中
                      localStorage.setItem("_t",result._t);
                       //显示学生列表
                       new StudentListView("app"); 
                 }else{
                     alert("用户名或则密码错误");
                 }  
                }
            })
        });
    }
}
//创建页面
new LoginView("app");